<template>
  <div>
    <myDivider name="大屏配置"></myDivider>
    <el-page-header @back="$router.go(-1)"></el-page-header>
    <el-form ref="formData" label-width="130px" label-position="left" :model="formData"
      style="margin-left: 50px;margin-top: 20px;padding-bottom: 80px;">
      <div class="title">数据配置</div>
      <el-form-item label="选择小区：">
        <el-select ref="refSelectVal" @change="selectChange" clearable v-model="formData.rqId" placeholder="请选择小区">
          <el-option v-for="item, i in residentailData" :key="i" :label="item.name" :value="item.residentialId">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="title">大屏图片</div>
      <MyUploadImgNotDetele style="margin-top: 10px;" :canUploadNum="1" :id="UploadId" v-if="ImgFileShow"
        :EchoImgList="EchoImgList" @getImgList="getImgList" @deleteImgList="deleteImgList"
        uploadUrl="/business/dataVisualCompanyConfig/uploadImg">
      </MyUploadImgNotDetele>
    </el-form>
    <div class="btn">
      <el-button style="width: 100px;" @click="cancel">取消</el-button>
      <el-button style="width: 100px;" type="primary" @click="okk">确认</el-button>
    </div>
  </div>
</template>

<script>
import MyUploadImgNotDetele from '../../components/upload/MyUploadImgNotDetele.vue';
export default {
  components: {
    MyUploadImgNotDetele
  },
  data() {
    return {
      formData: {},
      UploadId: 0,
      ImgFileShow: false,
      EchoImgList: [],
      deleteImg: [],
      scene: '',
      residentailData: [],
    }
  },
  async activated() {
    this.getResidentailData()
    this.scene = this.$route.query.type
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    if (this.scene == 'update') {
      let res = await this.$api.axios.get('/business/dataVisualCompanyConfig/detail?id=' + this.$route.query.id)
      if (res && res.data) {
        this.$set(this.formData, 'id', res.data.id)
        this.$set(this.formData, 'rqId', res.data.rqId)
        this.$set(this.formData, 'rqName', res.data.rqName)

        this.UploadId = res.data.id
      }
      if (res.data.pic) {
        this.$set(this.formData, 'pic', res.data.pic)
        this.EchoImgList = [res.data.pic]
      } else {
        this.$set(this.formData, 'pic', '')
        this.EchoImgList = []
      }

      this.deleteImg = []
      this.ImgFileShow = false
      setTimeout(() => {
        this.ImgFileShow = true
      })
    } else {
      this.UploadId = 0
      this.$set(this.formData, 'rqId', '')
      this.$set(this.formData, 'rqName', '')
      this.EchoImgList = []
      this.deleteImg = []
      this.ImgFileShow = false
      setTimeout(() => {
        this.ImgFileShow = true
      })
    }


  },
  methods: {
    selectChange() {
      this.$nextTick(() => {
        this.$set(this.formData, 'rqName', this.$refs.refSelectVal.selectedLabel)
      })
    },
    async getResidentailData() {
      let res = await this.$api.axios.get('/business/patrolQRCode/getCommunityList?name=')
      if (res) {
        this.residentailData = res.data
      }
    },
    getImgList(val) {
      console.log(val, '上传的图片');
      if (val.length == 0) {
        this.$set(this.formData, 'pic', '')
      } else {
        this.$set(this.formData, 'pic', val[0])
      }

    },
    deleteImgList(e) {
      if (e) {
        this.deleteImg.push(e)
      }

    },
    cancel() {
      this.$confirm('点击取消将不保存数据，是否返回？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {

      });

    },
    okk() {
      if (this.scene == 'add') {
        this.$confirm('请检查无误后提交？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.deleteImg.forEach(async el => {
            let abc = await this.$api.ImgFile.delete(defaultUrl + '/business/dataVisualCompanyConfig/deleteImg', {
              "picName": el
            })
          })
          let res = await this.$api.axios.post('/business/dataVisualCompanyConfig/insert', {
            "rqId": this.formData.rqId, //小区id，必填
            "rqName": this.formData.rqName, //小区名称，必填
            "pic": this.formData.pic,
            "unitId": this.logOnUser.unitId,
            "unitName": this.logOnUser.unitName
          })
          if (res) {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        }).catch(() => {

        });
      } else {
        this.$confirm('是否修改此数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(this.deleteImg, 'this.deleteImg');
          this.deleteImg.forEach(async el => {
            let abc = await this.$api.ImgFile.delete(defaultUrl + '/business/dataVisualCompanyConfig/deleteImg', {
              "picName": el
            })
          })
          let res = await this.$api.axios.post('/business/dataVisualCompanyConfig/update', {
            id: this.formData.id,
            "rqId": this.formData.rqId, //小区id，必填
            "rqName": this.formData.rqName, //小区名称，必填
            "pic": this.formData.pic,
            "unitId": this.logOnUser.unitId,
            "unitName": this.logOnUser.unitName
          })
          if (res) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        }).catch(() => {

        });
      }

    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-weight: bold;
  margin-top: 30px;
}

.btn {
  // margin-top: 50px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  box-shadow: 0 0 4px 1px #e1e1e1;
}
</style>